<template>
  <div class="clearfix">
    <a-upload
      accept="image/*"
      list-type="picture-card"
      :file-list="fileList"
      :showUploadList="{ 'showPreviewIcon': true, 'showRemoveIcon': mode !== 'detail' }"
      :remove="onRemove"
      @change="handleChange"
      @preview="handlePreview"
      :beforeUpload="beforeUpload"
    >
      <div v-if="fileList.length < 1 && mode !== 'detail'">
        <a-icon type="plus" />
      </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img :title="previewTitle" alt="图片出错" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>

<script>
import config from '@/config/mainConfig'

function getBase64 (file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })
}

export default {
  data () {
    return {
      fileList: [],
      previewTitle: '',
      previewImage: '',
      previewVisible: false
    }
  },
  props: {
    mode: {
      type: String,
      default: function () {
        return 'add'
      }
    },
    multiple: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    image: {
      type: Object,
      default: function () {
        return null
      }
    }
  },
  mounted () {
    if (this.image) {
      const { id, imageName, imageUrl } = this.image
      if (id && imageUrl) {
        this.fileList.push({ uid: -id, fid: id, name: imageName, status: 'done', url: `${config.imagesServerPrefix}${imageUrl}` })
      }
    }
  },
  methods: {
    getFileList () {
      return this.fileList.map(m => m.originFileObj)
    },
    clearFileList () {
      this.fileList = []
    },
    handleCancel () {
      this.previewVisible = false
    },
    handleChange ({ fileList }) {
      this.fileList = fileList
    },
    async handlePreview (file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewTitle = file.name
      this.previewVisible = true
    },
    beforeUpload (file) {
      this.fileList = [...this.fileList, file]
      return false
    },
    async onRemove (file) {
      // 后端删除图片
      // if (file.fid) {
      //   const { code, msg } = await service.del({ id: file.fid })
      //   if (code !== 200) {
      //     this.upShow(0, msg || '删除图片失败')
      //     return false
      //   }
      //   this.upShow(1, '删除图片成功')
      // }
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
    }
  }
}
</script>

<style type="text/css" scoped>
  .clearfix {
    height: 60px;
  }
    /deep/.ant-upload-list-picture-card-container, .ant-upload-list-picture-card .ant-upload-list-item {
      width: 42px;
      height: 42px;
      margin: 0;
    }
  /deep/.ant-upload-list-picture-card .ant-upload-list-item, .ant-upload-list-picture .ant-upload-list-item {
    position: relative;
    padding: 0;
    border: none;
    border-radius: 4px;
  }
  /deep/.ant-upload.ant-upload-select-picture-card {
    width: 60px;
    height: 60px;
    margin: 0;
    padding: 0;
  }
  /deep/.ant-upload-list-picture-card .ant-upload-list-item-thumbnail, .ant-upload-list-picture-card .ant-upload-list-item-thumbnail img {
    width: 60px;
    height: 60px;
  }
  /deep/.ant-upload-list-picture-card .ant-upload-list-item {
    width: 60px;
    height: 60px;
    margin: 0;
  }
</style>
